<template>
	<view>
		<view class="jiagetu">
			<view class="city-title">
				{{detail.region}}
			</view>
			<view class="city-zuijin">
				最近更新:{{detail.last_time}}
			</view>
			<view class="junjia">
				<view class="cankao" v-if="detail.mounth[0].time">
					{{detail.mounth[0].time}}参考均价
				</view>
				<view class="cankao" v-if="detail.mounth[0].time==undefined">
					暂无
				</view>
				<view class="price">
					<view v-if="detail.price">
						{{detail.price}} <text>元/㎡</text>
					</view>
					<view v-if="!detail.price">
						面议
					</view>
					<view class="shangzhang">
						相对上月{{detail.baifen}}%
					</view>
				</view>
			</view>

		</view>
		<view class="tubiao">
			<view class="changfangjiage">
				<view>厂房价格走势 </view>
				<view class="changfangjiage-right">
					<image class="changfangjiage-image" src="../../static/images/yuandian.png"></image>
					<view class="danwei">均价(元/㎡)</view>

				</view>
			</view>
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" />
			<view class="biaozhu">
				数据来源:厂房帝产业地产大数据

			</view>
		</view>
		<view class="hengxiange"></view>
		<view class="hot-park">
			<view class="hot-park-title">热门园区</view>
			<view class="hot-park-item">
				<view class="hot-park-text park-first">园区名称</view>
				<view class="hot-park-text park-second">均价</view>
				<view class="hot-park-text park-third"> 在售数量</view>
			</view>

<view class="hot-park-item" v-for="(item,index) in parks" @click="change(item)">
				<view class="item-title park-first">
					<view class="item-icon" :class="index+1==1 ? 'first' :'' " v-if="index+1==1">{{index+1}}</view>
								<view class="item-icon" :class="index+1==2 ? 'second' :'' " v-if="index+1==2">{{index+1}}</view>
								<view class="item-icon" :class="index+1==3 ? 'third' :'' " v-if="index+1==3">{{index+1}}</view>
								<view class="item-icon"  v-if="index+1>3">{{index+1}}</view>
					<view> {{item.name}}></view>
				</view>
				<view class="item-title park-second" v-if="item.price">
					{{item.price}}元/平
				</view>
				<view class="item-title park-second" v-if="!item.price">
					面议
				</view>
				<view class="item-title park-third">
					{{item.count}}套
				</view>
			</view>
		</view>
		<view class="hengxiange"></view>
		<uni-footer></uni-footer>
		<view class="hengxiange"></view>
		<view class="hengxiange"></view>
		<view class="hengxiange"></view>
		<view class="hengxiange"></view>
		<view class="hengxiange"></view>
		<view class="footer-button">
			<view class="left-button" @click="bikan">
				必看好厂
			</view>
			<view class="red-button" @click="bangwo">
				帮我找厂
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				categories: [],
				series: [],
				detail: {},
				parks:[]
			};
		},
		onLoad() {
			_self = this
			uni.showLoading({

			})
			if (uni.getStorageSync('address_id')) {
				this.getMouth(uni.getStorageSync('address_id'))
				this.getHotPark(uni.getStorageSync('address_id'))
			} else {
				this.$api.getDefaultRegions().then(
					res => {
						console.log(res)
						uni.hideLoading()
						uni.setStorageSync('address', res.data.name)
						uni.setStorageSync('address_id', res.data.id)
						this.getMouth(uni.getStorageSync('address_id'))
						this.getHotPark(uni.getStorageSync('address_id'))
					}

				)
			}
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(400);




		},

		methods: {
			getServerData() {

			},
			getHotPark(region_id) {
				this.$api.hotPark({
					'region_id': region_id
				}).then(
					res => {
						console.log(res)
						this.parks=res.data
					}
				)
			},
			bikan(){
				uni.switchTab({
					url:'/pages/list/list'
				})
			},
			bangwo(){
				uni.navigateTo({
					url:'/pages/zhaochangfang/zhaochangfang'
				})
			},
			change(item){
				uni.navigateTo({
						url:'/pages/area/detail/detail?id='+item.id
				})
			},
			getMouth(region_id) {
				uni.showLoading()
				this.$api.month({
					'region_id': region_id
				}).then(
					res => {
						uni.hideLoading()
						console.log(res)
						this.detail = res.data
						for (let item of res.data.mounth) {
							console.log(item)
							this.categories.push(item.time)
							this.series.push(item.price)
						}
						console.log(this.series)
						new uCharts({
							$this: _self,
							canvasId: "canvasColumn",
							type: 'line',
							fontSize: 11,
							legend: {
								show: false
							},
							dataLabel: true,
							dataPointShape: true,
							background: '#FFFFFF',
							pixelRatio: _self.pixelRatio,
							categories: this.categories,
							colors: ['#DA3337'],
							dataPointShapeType: 'hollow',
							series: [{
								name: " ",
								data: this.series,
							}],
							animation: true,
							xAxis: {
								disableGrid: false,
								type: 'grid',
								gridColor: '#ffffff',
								gridType: 'none',
								dashLength: 8,
							},
							yAxis: {
								disabled: false,
								disableGrid: false,
								gridColor: '#F6F6F6',
								color: '#F6F6F6',
								splitNumber: 5,
								format: (val) => {
									return val.toFixed(0) + '元/㎡'
								}
							},
							width: _self.cWidth * _self.pixelRatio,
							height: _self.cHeight * _self.pixelRatio,
							extra: {
								lineStyle: 'straight',

							}
						});
						this.getServerData();
					}
				)
			}

		}
	}
</script>

<style lang="scss">
	.charts {
		width: 750upx;
		height: 400upx;
		background-color: #FFFFFF
	}

	.jiagetu {
		background: url(https://pic.fhshidai.com/fileOXmf7XJTMq8PCH02ChflYksIHS141LLgoAWNbcPj.png) no-repeat;
		width: 750rpx;
		height: 329rpx;
		background-size: 750rpx 329rpx;
		padding-left: 32rpx;
		padding-top: 55rpx;
		padding-right: 30rpx;

		.city-title {
			margin-top: rpx;
			font-size: 40rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
		}

		.city-zuijin {
			font-size: 20rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}

		.junjia {
			margin-top: 30rpx;
			height: 200rpx;

			.cankao {
				font-size: 24rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}

			.price {
				font-size: 50rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

				.shangzhang {
					width: 300rpx;
					height: 47rpx;
					background: rgba(218, 51, 55, 1);
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}



	}

	.tubiao {
		width: 750rpx;
		height: 600rpx;
		padding-top: 43rpx;
		margin-left: 33rpx;
		padding-right: 50rpx;

		.changfangjiage {
			font-size: 40rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: rgba(49, 49, 49, 1);
			margin-bottom: 64rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.changfangjiage-right {
				display: flex;
				align-items: flex-end;

				.danwei {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
				}
			}
		}

	}

	.changfangjiage-image {
		width: 38rpx;
		height: 16rpx;
		margin-bottom: 5rpx;
		margin-right: 5rpx;
	}

	.biaozhu {
		text-align: center;
		font-size: 20rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: rgba(154, 155, 160, 1);
	}

	.hengxiange {
		width: 750rpx;
		height: 20rpx;
		background: rgba(246, 246, 246, 1);
	}

	.hot-park {
		padding-top: 60rpx;
		padding-left: 33rpx;
		padding-right: 49rpx;

		.hot-park-title {
			font-size: 40rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: rgba(49, 49, 49, 1);
		}
	}

	.hot-park-item {
		display: flex;
		margin-top: 10rpx;
	}

	.hot-park-text {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #9A9BA0;
	}
	.park-first{
		display: flex;
		width: 364rpx;
	}
	.park-second{
		display: flex;
		width: 180rpx;
	}
	.park-third{
		display: flex;

	}
	.item-title {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-icon {
		display: flex;
		width: 36rpx;
		height: 36rpx;
		align-items: center;
		justify-content: center;
		background: rgba(152, 152, 152, 1);
		border-radius: 6rpx;
		margin-right: 19rpx;
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.first {
		background: #DA3337;
	}

	.second {
		background: #FF5D18;
	}

	.third {
		background: #FE7D01;
	}

	.footer-button {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 37rpx;
		padding-right: 37rpx;

		background: rgba(255, 255, 255, 1);
		box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(246, 246, 246, 1);
	}

	.left-button {
		width: 324rpx;
		height: 84rpx;
		background: rgba(162, 0, 0, 1);
		border-radius: 42rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 83px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.red-button {
		width: 324rpx;
		height: 84rpx;
		background: #DA3337;
		border-radius: 42rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 83px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
